<template>
  <div>
    <el-row class="flex-wrap">
      <div v-for="(imgTitle, i) in imgs" class="item">
        <div class="pad-5" @click="goDetail(i + 1)">
          <div :class="['main-page', `product-conrainer-${i + 1}`]"></div>
          <h1 class="text-center">{{ imgTitle }}</h1>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import i18n from '@/lang/index'

const imgDetail = [
  {
    title: 'YW1682',
    Description: {
      Diameter: '65mm',
      thickness: '32-45/45-51/50-60mm',
      Backset: '60/70/85mm',
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'LH600',
    Description: {
      Diameter: '64.8mm',
      thickness: '35-45/40-51mm',
      Backset: '60mm',
      direction: i18n.t('adjustableBothSide'),
      others: i18n.t('bothSideLockNoTwistBotton'),
    },
  },
  {
    title: 'LP1X907',
    Description: {
      Diameter: '65mm',
      thickness: '25-45mm',
      Backset: '60/85mm',
      color: i18n.t('goldOrSiler'),
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'LB1X903',
    Description: {
      Diameter: '63mm',
      thickness: '30-45mm',
      Backset: '60/85mm',
      color: i18n.t('goldOrSiler'),
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'LYK203',
    Description: {
      Diameter: '71mm',
      thickness: '30-45mm',
      Backset: '60/70mm',
      color: i18n.t('goldOrSiler'),
      direction: i18n.t('adjustableBothSide'),
      others: i18n.t('TwistToLockOnExteriorKnob'),
    },
  },
  {
    title: 'LF603',
    Description: {
      width: `71mm / ${i18n.t('height')}：82mm`,
      thickness: '38-42mm',
      Backset: '60/85mm',
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'L36FCH',
    Description: {
      type: i18n.t('entranceAndEntrance'),
      Diameter: '63mm',
      thickness: `30-80mm (${i18n.t('fiveOption')})`,
      Backset: '60mm',
      color: i18n.t('bronzeRredBronzeBblackSilver'),
      direction: i18n.t('adjustableBothSide'),
      shap: i18n.t('roundAndSquare'),
    },
  },
  {
    title: 'W318-1',
    Description: {
      width: `72mm / ${i18n.t('height')}：80mm`,
      thickness: '38-42mm',
      Backset: '60/85mm',
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'W304',
    Description: {
      width: `72mm / ${i18n.t('height')}：80mm`,
      thickness: '38-42mm',
      Backset: '60/85mm',
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'C3600',
    Description: {
      width: `72mm / ${i18n.t('height')}：80mm`,
      thickness: '38-42mm',
      Backset: '60/85mm',
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'C3X900',
    Description: {
      width: `72mm / ${i18n.t('height')}：80mm`,
      thickness: '38-42mm',
      Backset: '60/85mm',
      direction: i18n.t('adjustableBothSide'),
    },
  },
  {
    title: 'C3800',
    Description: {
      width: `72mm / ${i18n.t('height')}：80mm`,
      thickness: '38-42mm',
      Backset: '60/85mm',
      direction: i18n.t('adjustableBothSide'),
    },
  },
]

export default {
  data() {
    return {
      imgs: ['YW1682', 'LH600', 'LP1X907', 'LB1X903', 'LYK203', 'LF603'],
    }
  },
  computed: {},
  methods: {
    goDetail(i) {
      this.$router.push({
        path: '/products/product-detail',
        query: {
          imgUrl: `multiSectionLock/multi-section-lock-0${i}`,
          description: imgDetail[i - 1].Description,
          title: imgDetail[i - 1]?.title,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.item {
  padding: 5px;
}

$pgs: 1, 2, 3, 4, 5, 6;
@each $i in $pgs {
  .product-conrainer-#{$i} {
    background-image: url('../../assets/imgs/multiSectionLock/multi-section-lock-0' + #{$i} + '.png');
  }
}
</style>
